<template>
	<view class="sort">
		<view class="sort-item" v-for="(sort,index) in sortList" :key="index">
			<view class="sort-item-item" v-for="(item,index2) in sort" :key="index2" @click="click(item,index,index2)" :style="{color:item.isCheck?'#B8212B':'',background: item.isCheck?'#EFF0F1':''}">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sortData: {
				type: Array
			}
		},
		data() {
			return {
				sortList: []
			}
		},
		created() {
			this.sortList = this.sortData;
		},
		methods: {
			click(item, index, index2) {
				let self = this;
				this.sortList.forEach((item1, i1) => {
					item1.forEach((item2, i2) => {
						if (i1 == index) {
							item2.isCheck = false;
						}
						if (i1 == index && index2 == i2) {
							item2.isCheck = true;
							self.$set(item1, i2, item2)
						}
					})
				})
				this.$emit('click', item, index, index2)
			},
			changeData(index,index2){
				this.sortList[index].forEach((item,index3)=>{
					if(index3==index2){
						item.isCheck = true;
					}else{
						item.isCheck = false;
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.sort {
		padding: 40rpx 0 40rpx 34rpx;
	}

	.sort-item {
		margin-bottom: 40rpx;
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;

	}

	.sort-item:last-child {
		margin-bottom: 0rpx;
	}

	.sort-item-item {
		flex: none;
		border-radius: 6rpx;
		height: 70rpx;
		margin-right: 40rpx;
		line-height: 70rpx;
		padding: 0 42rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;

	}
</style>
